<template>
  <!-- 首页——代码知识，技术社区 -->
  <div class="code">
    <div class="common">
      <div class="code_left">
        <p class="daima">代码知识</p>
        <!-- 添加条专详情 -->
        <div v-for="(item, index) in codeData[0]" :key="index" class="code_knowledge" style="cursor: pointer" @click="change(item.id)">
          <p>{{ item.title }}</p>
        </div>
        <router-link class="more" :to="{path:'/Technology',query:{type:3}}">查看更多>></router-link>
      </div>
      <div class="code_right">
        <div class="technology">
          <p class="jishu">技术社区</p>
          <p>
            <router-link class="more" :to="{path:'/Technology',query:{type:5}}">查看更多>></router-link>
          </p>
        </div>
        <div
            v-for="(item, index) in codeData[1]"
            :key="index"
            class="community"
            style="cursor: pointer"
            @click="routerxq(item.id)"
        >
          <p class="city_top">
            <img :src="item.image" alt=""/>
          </p>
          <div class="city_bottom">
            <p class="title">{{ item.title }}</p>
            <p class="shan">
              <span>{{ item.getmember.account }}</span>
              <span>{{ item.created_at }}</span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'code',
  components: {},
  props: {
    codeData: Array
  },
  data() {
    return {
      // konw: [
      //   { title: '某知名PHP集成环境被发现存在集成环境被发现存在' },
      //   { title: '某知名PHP集成环境被发现存在集成环境被发现存在' },
      //   { title: '某知名PHP集成环境被发现存在集成环境被发现存在' },
      //   { title: '某知名PHP集成环境被发现存在集成环境被发现存在' },
      //   { title: '某知名PHP集成环境被发现存在集成环境被发现存在' },
      //   { title: '某知名PHP集成环境被发现存在集成环境被发现存在' },
      //   { title: '某知名PHP集成环境被发现存在集成环境被发现存在' }
      // ],
      // city: [
      //   {
      //     image: require('../assets/index_city1.png'),
      //     title: '某知名PHP集成环境被发现存在后门，请各位谨慎使用...',
      //     school: '山东交通职业学院',
      //     time: '2021-04-14'
      //   },
      //   {
      //     image: require('../assets/index_city2.png'),
      //     title: '某知名PHP集成环境被发现存在后门，请各位谨慎使用...',
      //     school: '山东交通职业学院',
      //     time: '2021-04-14'
      //   },
      //   {
      //     image: require('../assets/index_city3.png'),
      //     title: '某知名PHP集成环境被发现存在后门，请各位谨慎使用...',
      //     school: '山东交通职业学院',
      //     time: '2021-04-14'
      //   },
      //   {
      //     image: require('../assets/index_city4.png'),
      //     title: '某知名PHP集成环境被发现存在后门，请各位谨慎使用...',
      //     school: '山东交通职业学院',
      //     time: '2021-04-14'
      //   }
      // ]
    }
  },
  methods: {
    // 跳转
    change(a) {
      this.$router.push({
        path: '/Problem_details',
        query: {
          id: a,
          name: 4
        }
      })
    },
    routerxq(a) {
      this.$router.push({
        path: '/Problem_details',
        query: {
          id: a,
          name: 4
        }
      })
    }
  },
  created() {
    // console.log(this.codeData);
  }
}
</script>
<style lang="scss" scoped>
.code {
  width: 100%;
  background-color: #fff;
  margin: 0 auto;
  margin-top: 44px;
  margin-bottom: 63px;

  .common {
    width: 1170px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;

    .code_left {
      // width: 322px;
      width: 385px;

      box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.1);
      padding: 40px 25px;

      .daima {
        font-size: 28px;
        color: #333333;
        // margin-top: 40px;
      }

      .code_knowledge {
        width: 292px;
        margin: 0 auto;
        color: #333;
        font-size: 20px;
        // margin-top: 7px;
        p {
          margin-top: 38px;
          width: 100%;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }

      .more {
        color: #999999;
        font-size: 16px;
        margin-top: 40px;
        float: right;
      }
    }

    .code_right {
      width: 733px;
      padding: 40px 20px 35px 35px;
      box-shadow: 0px 0px 23px 3px rgba(0, 0, 0, 0.1);

      .technology {
        display: flex;
        justify-content: space-between;

        .jishu {
          font-size: 28px;
          color: #333333;
        }

        :nth-child(2) {
          a {
            font-size: 16px;
            color: #999;
          }
        }
      }

      .community {
        width: 625px;
        margin-top: 10px;
        // margin-left: 39px;
        display: flex;
        justify-content: left;

        .city_top {
          width: 90px;
          margin-top: 30px;
          margin-right: 43px;

          img {
            display: block;
            width: 90px;
            height: 90px;
          }
        }

        .city_bottom {
          margin-top: 30px;
          width: 100%;

          .title {
            color: #333;
            font-size: 20px;
            margin-top: 5px;
            width: 100%;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }

          .shan {
            color: #999;
            font-size: 18px;
            margin-top: 30px;
            display: flex;
            justify-content: space-between;
          }
        }
      }
    }
  }
}
</style>
